<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超市账单管理系统</title>
    <style lang="scss">
        .like {
            cursor: pointer;
            font-size: 25px;
            display: inline-block;
        }
    </style>

    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/server.js" ></script>
    <script type="text/javascript" src="js/echarts.min.js"></script>

</head>
<body>
<div id="div">
    <template>
        <div>
            <el-row>
                <el-col :span="6">
                    <el-card shadow="hover" style="width: 100%;">
                        <div slot="header" class="clearfix">
                            <span><i class="el-icon-s-flag" style="color: red"></i>今日账单数</span>
                        </div>
                        <div style="font-size: 18px;text-align: center; margin-top: 15px;">
                            {{todaycount}} 笔
                        </div>
                        <div style="margin-top: 15px;"></div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card shadow="hover" style="width: 100%;">
                        <div slot="header" class="clearfix">
                            <span><i class="el-icon-s-flag" style="color: yellow"></i>昨日账单数</span>
                        </div>
                        <div style="font-size: 18px;text-align: center; margin-top: 15px;">
                            {{yesterdaycount}} 笔
                        </div>
                        <div style="margin-top: 15px;"></div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card shadow="hover" style="width: 100%;">
                        <div slot="header" class="clearfix">
                            <span><i class="el-icon-s-flag" style="color: blue"></i>本周账单数</span>
                        </div>
                        <div style="font-size: 18px;text-align: center; margin-top: 15px;">
                            {{weekcount}} 笔
                        </div>
                        <div style="margin-top: 15px;"></div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card shadow="hover" style="width: 100%;">
                        <div slot="header" class="clearfix">
                            <span><i class="el-icon-s-flag" style="color: green"></i>本月账单数</span>
                        </div>
                        <div style="font-size: 18px;text-align: center; margin-top: 15px;">
                            {{monthcount}} 笔
                        </div>
                        <div style="margin-top: 15px;"></div>
                    </el-card>
                </el-col>
            </el-row>
            <div style="margin-top: 25px;"></div>
            <el-row>
                <el-col :span="12">
                    <el-card shadow="hover" style="width: 100%;">
                        <div slot="header" class="clearfix">
                            <span><i class="el-icon-top-right" style="color: red"></i>最近7天账单数量趋势</span>
                        </div>
                        <div id="container1" style="height: 300px; font-size: 18px;text-align: center;">

                        </div>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card shadow="hover" style="width: 100%;">
                        <div slot="header" class="clearfix">
                            <span><i class="el-icon-s-data" style="color: green"></i>最近7天账单金额趋势</span>
                        </div>
                        <div id="container2" style="height: 300px; font-size: 18px;text-align: center;">

                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>

    </template>
</div>



</body>
</html>
<script>
    var vm = new Vue({
        el:"#div",
        data:{
            //定义变量
            todaycount: 0,
            yesterdaycount: 0,
            weekcount: 0,
            monthcount: 0
        },
        methods:{
            //定义函数
            show:function(){
                axios.get(
                    server_url + "/welcome/statBillCount"
                ).then(resp=>{
                    if(resp.data.flag){
                        //将后端响应的结果获取出来后赋值给vue中data的变量
                        this.todaycount = resp.data.data.todaycount;
                        this.yesterdaycount = resp.data.data.yesterdaycount;
                        this.weekcount = resp.data.data.weekcount;
                        this.monthcount = resp.data.data.monthcount;
                    }
                }).catch(err=>{
                    console.log(err);
                })
            }
        },
        mounted:function(){
            //页面加载时执行的代码
            //调用show函数
            this.show();
        }
    })
</script>
<script>
    var vm = new Vue({
        el:"#container1",
        data:{
            option:{
                xAxis: {
                    type: 'category',
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [],
                        type: 'line'
                    }
                ]
            }
        },
        methods:{
            echartsInit:function() {
                // 在生命周期中挂载
                echarts.init(document.getElementById('container1')).setOption(this.option);
            },
            show1:function(){
                // 获取最近7天账单数量趋势数据
                axios.get(
                    server_url + "/welcome/last7DaysBillCount"
                ).then(resp=>{
                    if(resp.data.flag){
                        // 提取日期和数量数据
                        let dates = [];
                        let counts = [];
                        resp.data.data.forEach(item => {
                            // 格式化日期为MM-DD格式
                            const dateObj = new Date(item.date);
                            const month = dateObj.getMonth() + 1;
                            const day = dateObj.getDate();
                            const formattedDate = month + '-' + day;
                            
                            dates.push(formattedDate);
                            counts.push(item.count);
                        });
                        
                        // 更新图表选项
                        this.option.xAxis.data = dates;
                        this.option.series[0].data = counts;
                        
                        // 重新初始化图表
                        this.echartsInit();
                    }
                }).catch(err=>{
                    console.log(err);
                });
            }
        },
        mounted:function(){
            this.show1();
        }
    })
</script>
<script>
    var vm = new Vue({
        el:"#container2",
        data:{
            option:{
                xAxis: {
                    type: 'category',
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [],
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }
                ]
            }
        },
        methods:{
            echartsInit:function() {
                // 在生命周期中挂载
                echarts.init(document.getElementById('container2')).setOption(this.option)
            },
            show2:function(){
                // 获取最近7天账单金额趋势数据
                axios.get(
                    server_url + "/welcome/last7DaysBillAmount"
                ).then(resp=>{
                    if(resp.data.flag){
                        // 提取日期和金额数据
                        let dates = [];
                        let amounts = [];
                        resp.data.data.forEach(item => {
                            // 格式化日期为MM-DD格式
                            const dateObj = new Date(item.date);
                            const month = dateObj.getMonth() + 1;
                            const day = dateObj.getDate();
                            const formattedDate = month + '-' + day;
                            
                            dates.push(formattedDate);
                            amounts.push(item.amount);
                        });
                        
                        // 更新图表选项
                        this.option.xAxis.data = dates;
                        this.option.series[0].data = amounts;
                        
                        // 重新初始化图表
                        this.echartsInit();
                    }
                }).catch(err=>{
                    console.log(err);
                });
            }
        },
        mounted:function(){
            this.show2();
        }
    })
</script>